"use client";

import React from "react";
import Link from "next/link";
import { useLanguage } from "~/lib/LanguageContext";
import { ModelFineTuning } from "./model-fine-tuning";

export function FooterCards() {
  const { language } = useLanguage();
  
  const jenkinsText = language === 'zh' ? 'Jenkins集成' : 'Jenkins Integration';
  const dockerText = language === 'zh' ? 'Docker极简安装' : 'Simple Docker Setup';
  
  return (
    <div className="container mx-auto max-w-6xl px-4 py-4">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
        {/* Jenkins Card */}
        <Link 
          href="/jenkins"
          className="group h-12 relative flex items-center p-3 rounded-lg bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/40 dark:to-indigo-950/40 text-blue-700 dark:text-blue-300 hover:text-indigo-800 dark:hover:text-indigo-200 transition-all duration-300 border border-blue-100 dark:border-blue-900/30 hover:shadow-md overflow-hidden hover:h-auto"
        >
          <div className="flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="transition-transform group-hover:scale-110 group-hover:rotate-3 flex-shrink-0">
              <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
            </svg>
            <h3 className="text-base font-medium truncate">{jenkinsText}</h3>
          </div>
          <div className="absolute top-12 left-0 right-0 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/40 dark:to-indigo-950/40 p-3 opacity-0 group-hover:opacity-100 transition-all duration-300 flex flex-col">
            <p className="text-sm text-blue-600 dark:text-blue-400 mb-3">
              {language === 'zh' 
                ? '为您的代码库设置自动化CI/CD流程，集成Jenkins实现持续部署' 
                : 'Set up automated CI/CD pipelines for your codebase with Jenkins integration'}
            </p>
            <div className="text-sm font-medium flex items-center gap-1.5">
              {language === 'zh' ? '查看详情' : 'View details'}
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="transition-transform group-hover:translate-x-1">
                <path d="M5 12h14"/>
                <path d="m12 5 7 7-7 7"/>
              </svg>
            </div>
          </div>
          <span className="absolute bottom-0 left-0 h-0.5 w-full bg-gradient-to-r from-blue-400 to-indigo-500 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100" />
        </Link>
        
        {/* Docker Card */}
        <Link 
          href="/docker-setup"
          className="group h-12 relative flex items-center p-3 rounded-lg bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-950/40 dark:to-cyan-950/40 text-blue-700 dark:text-blue-300 hover:text-cyan-800 dark:hover:text-cyan-200 transition-all duration-300 border border-blue-100 dark:border-blue-900/30 hover:shadow-md overflow-hidden hover:h-auto"
        >
          <div className="flex items-center gap-3">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="transition-transform group-hover:scale-110 group-hover:rotate-3 flex-shrink-0">
              <path d="M21 18H6a2 2 0 0 1-2-2V9" />
              <path d="M2 14h12a2 2 0 0 1 2 2v4" />
              <path d="M12 4h4a2 2 0 0 1 2 2v4" />
              <rect width="4" height="4" x="2" y="5" rx="1" />
              <rect width="4" height="4" x="14" y="14" rx="1" />
            </svg>
            <h3 className="text-base font-medium truncate">{dockerText}</h3>
          </div>
          <div className="absolute top-12 left-0 right-0 bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-950/40 dark:to-cyan-950/40 p-3 opacity-0 group-hover:opacity-100 transition-all duration-300 flex flex-col">
            <p className="text-sm text-blue-600 dark:text-blue-400 mb-3">
              {language === 'zh' 
                ? '使用Docker快速部署CodeMariner，简化环境配置和依赖管理' 
                : 'Quickly deploy CodeMariner using Docker, simplifying environment setup and dependency management'}
            </p>
            <div className="text-sm font-medium flex items-center gap-1.5">
              {language === 'zh' ? '查看详情' : 'View details'}
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="transition-transform group-hover:translate-x-1">
                <path d="M5 12h14"/>
                <path d="m12 5 7 7-7 7"/>
              </svg>
            </div>
          </div>
          <span className="absolute bottom-0 left-0 h-0.5 w-full bg-gradient-to-r from-blue-400 to-cyan-500 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100" />
        </Link>
        
        {/* Model Fine-tuning Card */}
        <div className="h-auto">
          <ModelFineTuning />
        </div>
      </div>
    </div>
  );
} 